import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import filter from "./filter/filter";

Vue.config.productionTip = false;

//$ajax是vue内部自带的ajax，这里不使用ajax，而是使用axios访问后端接口，所以将$ajax覆盖。
Vue.prototype.$ajax = axios;

// 事件总线，其实就是一个新的vue实例。它可以让两个毫不相关的组件或vue页面关联起来。
/**
 * 如何使用？从$emit方法触发到最终$on方法执行。
 * 可以在任意位置$emit方法触发，然后在任意vue组件或页面被监听时用$on方法执行，
 * 比如在mounted()方法中使用$event.$on("事件名",参数)方法并执行。
 */
Vue.prototype.$event = new Vue();

/**
 * axios请求拦截器
 */
axios.interceptors.request.use(function (config) {
  console.log("请求：", config);
  //不知道为什么增加下面两句就报错。
  // config.headers.masterOfWeapon = "武器大师";
  // console.log("请求头headers增加TheMaster属性:", config.headers.masterOfWeapon);
  return config;
}, error => {});

/**
 * axios响应拦截器
 */
axios.interceptors.response.use(function (response) {
  console.log("返回结果：", response);
  response.headers.prince = "嘉文四世";
  console.log("响应头headers增加prince属性：", response.headers.prince);
  return response;
}, error => {});



// 全局过滤器，vue在解析html中双花括号{{变量}}的表达式时，进行过滤操作。
// 通过Object.keys(filter)将filter设置到vue当中，成为过滤器的一部分，
// 猜测应该是返回一个数组，通过forEach遍历。
// 使用时在html页面通过双花括号传入两个参数:{{数组|过滤函数()}}，
// vue在解析这个表达式的时会经由过滤器处理。
Object.keys(filter).forEach(key => {
  //key相当于双花括号中的数组,filter[key]相当于双花括号中的过滤函数。
  Vue.filter(key, filter[key])
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

console.log("环境：", process.env.NODE_ENV);
//process.env.VUE_APP_SERVER需要安装router后生效
console.log("地址：", process.env.VUE_APP_SERVER);
